<template>
  <cloudPage :isLoading="pageLoading">
    <cloudHeader slot="gHeader">
      <view class="grace-header-body" style="background:rgb(52, 58, 69)">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view class="grace-header-content-noflex grace-text-center font-32">
          {{ $t("common.title.bankAccount") }}
        </view>
        <!-- 右侧按钮 -->
        <view
          class="icons grace-icons icon-add"
          style="font-size:38rpx;"
          @tap.stop="onTapAddBank"
        ></view>
      </view>
    </cloudHeader>
    <view class="gbody main" v-if="!pageLoading">
      <view class="navbar">
        <cloudNavIconBar
          :items="categories"
          :icons="icons"
          lineHeight="88rpx"
          :isCenter="true"
          :currentIndex="cateCurrentIndex"
          :size="230"
          color="#FFFFFF"
          activeLineBg="#FFFFFF"
          textAlign="center"
          activeColor="#FFFFFF"
          activeLineWidth="55%"
          activeLineHeight="4rpx"
          @change="navChange"
        ></cloudNavIconBar>
      </view>
      <view class="tab-index">
        <view class="data-table">
          <view class="title grace-flex">
            <view class="font-28 color-g9">
              {{ $t("my.bankAccount.account_number") }}
            </view>
            <view class="font-28 color-g9">{{ $t("common.title.name") }}</view>
            <view class="font-28 color-g9">
              {{ $t("common.title.status") }}
            </view>
          </view>
        </view>
        <!-- 支付宝或微信 -->
        <view
          class="table-data-list"
          v-if="cateCurrentIndex == 0 || cateCurrentIndex == 1"
        >
          <view
            class="table-ul grace-flex"
            v-for="(bank, index) in currentData"
            :key="index"
            @tap.stop="onTapImage(bank)"
            @longpress.stop="onTapDel(bank.id)"
            :class="{ enable: bank.enable }"
          >
            <view class="font-28 color-b1">{{ bank.value.account }}</view>
            <view class="font-28 color-b1">
              {{ bank.value.true_name || "" }}
            </view>
            <view class="font-28 color-b1" @tap.stop="onTapEnable(bank.id)">
              <switch :checked="!!bank.enable" @change="switchChange"></switch>
            </view>
          </view>
        </view>
        <!-- 银行卡 -->
        <view class="table-data-list" v-if="cateCurrentIndex == 2">
          <view
            class="table-ul grace-flex"
            v-for="(bank, index) in currentData"
            :key="index"
            @tap.stop="onTapBank(bank)"
            @longpress.stop="onTapDel(bank.id)"
            :class="{ enable: bank.enable }"
          >
            <view class="font-28 color-b1"
              >{{ bank.value.bank_name }} {{ bank.value.sub_bank_name }}</view
            >
            <view class="font-28 color-b1">
              {{ bank.value.true_name || "" }}
            </view>
            <view class="font-28 color-b1" @tap.stop="onTapEnable(bank.id)">
              <switch :checked="!!bank.enable" @change="switchChange"></switch>
            </view>
          </view>
        </view>
      </view>
      <!-- 支付宝/微信收款码弹出框 -->
      <graceDialog
        :isTitle="false"
        :show="showImage"
        width="85%"
        :isBtns="false"
        :isCloseBtn="false"
        @closeDialog="showImage = false"
      >
        <view slot="content" style="text-align: center; padding: 30rpx 0rpx;">
          <image :src="imageSrc" style="width: 600rpx; height: 850rpx;" />
          <view style="height: 80rpx; line-height: 80rpx;">{{ account }}</view>
        </view>
      </graceDialog>
      <!-- 银行卡详细弹出框 -->
      <graceDialog
        :isTitle="false"
        :show="showBank"
        width="85%"
        :isBtns="false"
        :isCloseBtn="false"
        @closeDialog="showBank = false"
      >
        <view slot="content" style="text-align: center;">
          <view class="grace-form">
            <view class="cloud-form">
              <view
                class="grace-form-item grace-flex grace-space-between b-t-e"
              >
                <view class="font-24 bold-500 color-b1">
                  {{ $t("my.bankAccount.card_holder_name") }}
                </view>
                <view class="font-24 bold-500 color-grey">
                  {{ showBankInfo.true_name }}
                </view>
              </view>
              <view
                class="grace-form-item grace-flex grace-space-between b-t-e"
              >
                <view class="font-24 bold-500 color-b1">
                  {{ $t("my.bankAccount.bank_card_number") }}
                </view>
                <view class="font-24 bold-500 color-grey">
                  {{ showBankInfo.account }}
                </view>
              </view>
              <view
                class="grace-form-item grace-flex grace-space-between b-t-e"
              >
                <view class="font-24 bold-500 color-b1">
                  {{ $t("my.bankAccount.card_bank") }}
                </view>
                <view class="font-24 bold-500 color-grey">
                  {{ showBankInfo.bank_name }}
                </view>
              </view>
              <view class="grace-form-item grace-flex grace-space-between">
                <view class="font-24 bold-500 color-b1">
                  {{ $t("my.bankAccount.sub_branch") }}
                </view>
                <view class="font-24 bold--500 color-grey">
                  {{ showBankInfo.sub_bank_name }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </graceDialog>
      <!-- 删除弹出框 -->
      <graceDialog
        title="温馨提示"
        :show="showDel"
        :isCloseBtn="false"
        @closeDialog="showDel = false"
      >
        <view slot="content">
          <view class="del-tips">
            {{ $t("my.bankAccount.confirm_delete") }}
          </view>
        </view>
        <view slot="btns" class="grace-space-between mt-20">
          <text class="grace-dialog-buttons" @tap="showDel = false">
            {{ $t("common.operate.close") }}
          </text>
          <text class="grace-dialog-buttons grace-blue" @tap="delConfirm">
            {{ $t("common.operate.sure") }}
          </text>
        </view>
      </graceDialog>
    </view>
  </cloudPage>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      icons: ["iconzhifubao", "iconweixindenglu", "iconyinlian"],
      types: ["alipay", "wechat", "bank"],
      cateCurrentIndex: 0,
      showBank: false,
      showBankInfo: {
        account: "",
        bank_name: "",
        true_name: "",
        sub_bank_name: ""
      },
      showImage: false,
      imageSrc: "",
      account: "",
      showDel: false,
      del_bank_id: 0,
      pageLoading: true
    };
  },
  async onLoad() {
    await this.loadBanks();
    this.pageLoading = false;
  },
  computed: {
    ...mapGetters("user", ["banks"]),
    categories() {
      return [
        this.$t("common.title.alipay"),
        this.$t("common.title.wechat"),
        this.$t("common.title.bank_card")
      ];
    },
    currentData() {
      if (this.cateCurrentIndex == 0) return this.banks.alipay;
      else if (this.cateCurrentIndex == 1) return this.banks.wechat;
      else return this.banks.bank;
    }
  },
  methods: {
    ...mapActions("user", ["loadBanks", "enableUserBank", "deleteUserBank"]),
    // 确认删除
    async delConfirm() {
      uni.showLoading({
        title: this.$t("common.tips.deleting")
      });
      await this.deleteUserBank({ id: this.del_bank_id });
      uni.hideLoading();
      this.showDel = false;
    },
    // 类型切换
    navChange(index) {
      this.cateCurrentIndex = index;
    },
    // 银行详细
    onTapBank(bank) {
      this.showBankInfo = bank.value;
      this.showBank = true;
    },
    // 微信/支付宝二维码显示
    onTapImage(bank) {
      this.imageSrc = bank.value.url;
      this.account = bank.value.account;
      this.showImage = true;
    },
    // 长按删除
    onTapDel(bank_id) {
      this.del_bank_id = bank_id;
      this.showDel = true;
    },
    // 启用/禁用
    async onTapEnable(id) {
      uni.showLoading({
        title: this.$t("common.tips.operateing")
      });
      await this.enableUserBank({ id: id });
      uni.hideLoading();
    },
    switchChange(e) {
      return false;
    },
    // 添加收款账号
    onTapAddBank() {
      this.handleNavTo({
        url: "/pages/my/bank/add?bankType=" + this.types[this.cateCurrentIndex]
      });
    }
  }
};
</script>

<style scoped>
.bold-500 {
  font-weight: 500;
}
.navbar {
  background-color: rgba(52, 58, 69);
}
/* 列表数据 */
.tab-index {
  padding: 25rpx;
}

.tab-index .data-table .title view {
  flex: 1;
  text-align: center;
  font-weight: 500;
}

.tab-index .data-table .title view:last-child {
  flex: 0.5;
}

.table-data-list {
  width: 100%;
}

.table-data-list .table-ul {
  border-bottom: 1rpx solid #eeeeee;
}

.table-data-list .table-ul:last-child {
  border-bottom: none;
}

.table-data-list .table-ul view {
  flex: 1;
  line-height: 80rpx;
  text-align: center;
  width: 100%;
  font-weight: 500;
}
.table-data-list .table-ul view:last-child {
  flex: 0.5;
}
.del-tips {
  text-align: center;
}
.cloud-form {
  padding: 30rpx 30rpx;
}
.grace-form .grace-form-item {
  height: 80rpx;
  line-height: 80rpx;
}
.grace-form .grace-form-item .grace-form-body {
  width: 100%;
}
.enable view {
  color: #eb526e !important;
}
</style>
